<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="产品" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<Province @changeProvince="changeProvince" @changeCity="changeCity" @changeArea="changeArea" @changeAreaLevel="changeAreaLevel" />
		<view class="subsection">
			<scroll-view class="select-top-bar">
				<view v-for="(item, index) in selectViewList" :key="index"
					@click="selectViewFn(item, index)" class="select-top-bar-item" :class="{ 'selected': selected == index }">
					<view class="top-bar-item-title">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="contain-view">
			<view class="searchs">
				<!-- search模块 -->
				<view class="search">
					<view class="testop">
						<view class="buttime">
							<view class="center">
								<image src="@/static/socialized-service/breed/guanjian.png" mode="aspectFit"></image>
								<uni-easyinput class="uni-mt-5" v-model="searchName" :inputBorder="false" placeholder="关键词" style="width: 100%;"></uni-easyinput>
							</view>
						</view>
					</view>
					<view class="btn" @click="goSearch">搜索</view>
				</view>
			</view>
			
			<scroll-view scroll-y="true" :style="{height:setcollapseheight() - 30 + 'px'}" :scroll-top="scrollTop" @scroll="onScroll"
				@scrolltolower="handleScrolltolowerone()">
				<view v-if="dataList.length != 0" class="pro-box">
					<view class="pro-card" v-for="item,index in dataList" :key="index">
						<view class="left-page">
							<image class="pro-img" :src="item.imgList[0] && item.imgList[0].content" mode="scaleToFill"></image>
						</view>
						<view class="right-page">
							<view class="title">{{ item.productTitle }}</view>
							<view class="content" v-html="item.content[0].content"></view>
							<view class="btn">
								<button @click="toProDetail(item)" class="btn-view">查看详情</button>
							</view>
							<!-- <image class="view-item-img" src="@/static/socialized-service/financial-insurance/jing.png" mode="heightFix"></image> -->
						</view>
					</view>
				</view>
			
				<view v-if="dataList.length == 0" class="facility-view-nodata">
					<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
					<view class="facility-view-nodata-line">
						暂无数据
					</view>
				</view>
			</scroll-view>
		</view>
		<bottomBar></bottomBar>
	</view>
</template>

<script>
	import bottomBar from "@/subPage1/components/socialized-bottomtabar/financial-bottomtabar"
	import Province from '@/subPage1/components/province/index.vue'
	import productApi from '@/api/socialized-servce/financial-insurance/product/index.js'
	export default {
		components: {
			bottomBar,
			Province
		},
		data() {
			return {
				selected: 0,
				scrollTop: 0,
				oldScrollTop: 0,
				// 可选择跳转页面数据
				selectViewList: [
					{
						name: "全部",
						value: "",
					},
					{
						name: "金融产品",
						value: 0,
					},
					{
						name: "保险产品",
						value: 1,
					},
				],
				searchName: '',
				dataList: [],
				techPage: {
					page: 1,
					size: 10,
					total: 0,
				},
				areaLevel: '',
				provinceId: '',
				areaId: '',
				cityId: ''
			}
		},
		onPullDownRefresh() {
			this.searchName = ''
			this.searchParam = {}
			this.updataContent()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
		},
		onShow() {
			
		},
		methods: {
			selectViewFn(row, i) {
				this.searchName = ''
				this.searchParam = {}
				
				this.selected = i
				this.financialAndInsuranceFlag = row.value
				uni.setStorageSync('financialAndInsuranceFlag',row.value)
				this.techPage.page = 1
				this.loadDataList()
			},
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// 获取产品列表
			loadDataList () {
				productApi.queryPageByCondition({
					...this.techPage,
					condition: {
						...this.searchParam,
						financialAndInsuranceFlag: this.financialAndInsuranceFlag,
						areaLevel: this.areaLevel,
						provinceId: this.provinceId,
						cityId: this.cityId,
						areaId: this.areaId,
						serviceProviderNo: uni.getStorageSync('serviceProviderNo'),
					}
				}).then(res => {
					let list = res.data.content
					this.techPage.total = res.data.totalElements
					if (this.techPage.page == 1) {
						this.dataList = list
						this.scrollTop = this.oldScrollTop
						this.$nextTick(() =>{
							this.scrollTop = 0
						})
					} else {
						this.dataList.push(...list)
					}
					this.dataList.forEach(el=>{
						let arr = this.sliceStr(el.productContent).filter(el=>el.type === 'image')
						let content = this.sliceStr(el.productContent).filter(el=>el.type === 'text')
						el['imgList'] = [...arr]
						el['content'] = content
					})
				})
			},
			// 搜索
			goSearch() {
				this.searchParam = {
					productTitle: this.searchName,
				}
				this.updataContent()
			},
			updataContent() {
				this.techPage.page = 1
				this.loadDataList()
			},
			// 跳转到详情
			toProDetail(row) {
				const url = '/subPage1/socialized-service/financial-insurance/product/product-detail/index'
				this.$togo(url, {productId: row.productId, productUserId: row.productUserId})
			},
			// 上拉加载更多
			handleScrolltolowerone() {
				let len = this.techPage.page * this.techPage.size
				if (len >= this.techPage.total) return
				this.techPage.page += 1
				this.loadDataList()
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(230)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				let oldHeight = uni.upx2px(150)
				winHeight = parseInt(winHeight) - newheight - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				uni.navigateBack({ delta: 1 })
			},
			// 拆
			sliceStr(str) {
			  let result = []
			  const reg = /<img.+?src=[\"\'](.+?)[\"\'].{0,}?>/g;
			  let index = 0
			  str = str.replace(/<p/g,'<p class="nodeText"')
			  str.replace(reg,(value,word,position)=>{
			    const valueLen = value.length
			    const text = {
			      type: 'text',
			      content: str.slice(index,position)
			    }
			    const img = {
			      type: 'image',
			      content: word
			    }
			    result.push(text,img)
			    index = position +valueLen
			  })
			  result.push({
			    type: 'text',
			    content: str.slice(index)
			  })
			  return result
			},
			initSelect() {
				let financialAndInsuranceFlag = uni.getStorageSync('financialAndInsuranceFlag')
				if(financialAndInsuranceFlag == 0 && financialAndInsuranceFlag !== '') {
					// this.financialAndInsuranceFlag = uni.getStorageSync('financialAndInsuranceFlag')
					this.selectViewFn({
						name: "金融产品",
						value: 0,
					},1)
				} else if(financialAndInsuranceFlag == 1) {
					this.selectViewFn({
						name: "保险产品",
						value: 1,
					},2)
				} else {
					this.selectViewFn({
						name: "全部",
						value: '',
					},0)
				}
			},
			changeAreaLevel(e) {
				this.areaLevel = e.gradeId
				this.provinceId = null
				this.cityId = null
				this.areaId = null
				this.initSelect()
			},
			changeProvince(e) {
				let {provinceId,areaLevel} = e
				this.provinceId = provinceId
				this.cityId = null
				this.areaId = null
				this.areaLevel = areaLevel
				this.initSelect()
			},
			changeCity(e) {
				let {provinceId,areaLevel,cityId} = e
				this.provinceId = provinceId
				this.cityId = cityId
				this.areaId = null
				this.areaLevel = areaLevel
				this.initSelect()
			},
			changeArea(e) {
				let {provinceId,areaLevel,cityId,areaId} = e
				this.provinceId = provinceId
				this.cityId = cityId
				this.areaId = areaId
				this.areaLevel = areaLevel
				this.initSelect()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.subsection {
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #d3e6f9;
			
			.select-top-bar {
				width: 100%;
				justify-content: space-around;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
			
				.select-top-bar-item {
					display: inline-block;
					margin-right: 12rpx;
					padding-bottom: 12rpx;
					width: 33.33%;
					height: 60rpx;
					font-size: 30rpx;
					
					&.selected {
						border-bottom: 4rpx solid #0e7ae9;
					}
					
					&:last-child {
						margin-right: 0;
					}
			
					.top-bar-item-title {
					  width: 100%;
					  height: 60rpx;
					  line-height: 60rpx;
					  text-align: center;
					}
				}
			}
		}

		.contain-view {
			margin: 0 30rpx;
			position: relative;
			
			.searchs {
				position: relative;
				display: flex;
				// padding-top: 16rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				
				.search {
					width: 100%;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgba(255, 255, 255, 1);
					border: 1px solid rgba(0, 0, 0, 0.05);
					box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
				
					.testop {
						flex: 35%;
						color: #FFFFFF;
						height: 50rpx;
						// border-right: 4rpx #cccbce solid;
						margin-left: 5rpx;
						padding-right: 10rpx;
						font-size: 30rpx;
						
						&:last-child {
							border-right: none;
						}
				
						.buttime {
							color: #959497;
							height: 50rpx;
							white-space: nowrap;
							font-weight: 600;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
				
						.center {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
				
							.textt {
								width: 190rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
				
							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 10rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
				
				.btn {
					position: relative;
					z-index: 66;
					width: 120rpx;
					height: 64rpx;
					margin: 0 16rpx 0 8rpx;
					font-size: 28rpx;
					line-height: 64rpx;
					text-align: center;
					color: #FFFFFF;
					background: linear-gradient(18deg, #43A2FF 0%, #62B1FF 100%);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					opacity: 1;
				}
			}
			
			.pro-box {
				overflow: auto;
				
				.pro-card {
					background-color: #fff;
					border-radius: 12rpx;
					padding: 30rpx 30rpx 30rpx 0;
					position: relative;
					// border-top: 4rpx solid #8dc5ff;
					display: flex;
					margin-bottom: 30rpx;
					
					.left-page {
						width: 200rpx;
						height: 170rpx;
						margin-right: 20rpx;
						padding-left: 30rpx;
						border-left: 6rpx solid #ffbc28;
						.pro-img {
							width: 100%;
							height: 100%;
						}
					}
					
					.right-page {
						width: calc(100% - 260rpx);
						.title {
							font-size: 40rpx;
							margin-bottom: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.content {
							height: 40rpx;
							margin-bottom: 12rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							::v-deep* {
								font-size: 28rpx!important;
								overflow: hidden!important;
								text-overflow: ellipsis!important;
								word-spacing: nowrap!important;
							}
						}
						.btn {
							.btn-view {
								width: 180rpx;
								font-size: 24rpx;
								float: right;
								color: #ad9a7b;
								background-color: #fff;
								border: 2rpx solid #ad9a7b;
								border-radius: 40rpx;
							}
						}
						.view-item-img {
							position: absolute;
							width: 50rpx;
							height: 50rpx;
							right: 50rpx;
							top: -4rpx;
						}
					}
				}
			}
		}
	}
	
</style>
